<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import { Toast, Dialog } from "vant";
import { parseTime } from "../../../utils";
import RecordsInfoApi from '../api/safetyCheck'
import namePic from "../../../assets/img/namePic.png"
import { ImagePreview } from 'vant';
import { useRoute } from "vue-router"
import store from "@/store"
import { Item } from "ant-design-vue/lib/menu";
const route = useRoute()
onMounted(() => {
  getDetail()

})

const api = import.meta.env.VITE_APP_BASE_API
const shiftType = Array.from(store.getters.dictMap).filter(entry => entry.groupCode === "shift_type");

const currentStage = Array.from(store.getters.dictMap).filter(entry => entry.groupCode === "current_stage");
const activeName = ref(['0'])
const formState = ref({
  //营业厅
  id: '',
  checkId: '',
  yytname: undefined,
  //检查日期
  checkDate: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
  //创建时间
  createTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
  //班次类型
  shiftType: undefined,
  //当前阶段
  currentStage: undefined,
  //创建人id
  created_by: undefined,

  preShift: undefined,
  midShift: undefined,
  postShift: undefined,
  //班前检查字段
  // fireExitClear: undefined,
  // fireAlarmOk: undefined,
  // monitorOk: undefined,
  // infraredAlarmOk: undefined,
  // safeSecure: undefined,
  // equipmentOk: undefined,
  // wiringTidy: undefined,
  // environmentClean: undefined,
  // pIssues:undefined,
  // pSolutions: undefined,
  //安全员签名
  // secureWrite: undefined,
  //班中检查字段
  // equipmentStatus: undefined,
  // fireAlarmStatus: undefined,
  // monitorStatus: undefined,
  // orderStatus: undefined,
  // securityOnDuty: undefined,
  // mIssues:undefined,
  // mSolutions: undefined,
  // //班后检查字段
  // powerOff: undefined,
  // doorsLocked: undefined,
  // safeLocked: undefined,
  // cashSecured: undefined,
  // monitorOk: undefined,
  // fireAlarmOk: undefined,
  // infraredArmed: undefined,
  // hIssues:undefined,
  // hSolutions: undefined,
  // fileList: []
})
const onClickLeft = () => history.back();
const getDetail = () => {
  RecordsInfoApi.getSafetycheck({ id: route.query.id }).then(res => {
    if (res.data.code == 200) {
      let dataDetail = res.data.data
      Object.keys(formState.value).forEach(key => {
        if (dataDetail.hasOwnProperty(key)) {
          formState.value[key] = dataDetail[key];
        }
      });
    }
    console.log(formState.value)
  })

}


const showImg = (url) => {
  ImagePreview([
    url
  ]);
}
</script>

<template>
  <div>
    <van-nav-bar title="详情" left-text="返回" left-arrow @click-left="onClickLeft"></van-nav-bar>
    <van-cell class="list-item" v-if="shiftType.length > 0">
      <template #default>
        <van-steps :active="formState.shiftType - 1" active-color="#1989fa">
          <van-step>班前检查</van-step>
          <van-step>班中检查</van-step>
          <van-step>班后检查</van-step>
        </van-steps>

        <div style="padding:0 18px 18px 0;display: flex;flex-direction: column;gap: 10px;">
          <div><span class="groupTitle">营业厅：</span>{{ formState.yytname }}</div>
          <div><span class="groupTitle">时间：</span>{{ formState.createTime }}</div>
          <div><span class="groupTitle">当前状态：</span>{{ formState.shiftType && shiftType.length > 0 ?
            shiftType[formState.shiftType - 1].label :
            '' }}
          </div>
          <div><span class="groupTitle">当前流程：</span><van-tag v-if="formState.currentStage == 1" plain type="primary"
              size="large">{{ formState.currentStage
                ?
                currentStage[formState.currentStage - 1].label : 1 }}</van-tag>
            <van-tag v-if="formState.currentStage == 2" plain type="success" size="large">{{ formState.currentStage
              ?
              currentStage[formState.currentStage - 1].label : 1 }}</van-tag>
            <!-- <van-tag v-if="formState.currentStage == 3" plain type="success" size="large">{{ formState.currentStage
              ?
              currentStage[formState.currentStage - 1].label : 1 }}</van-tag> -->
          </div>
        </div>

        <van-collapse v-model="activeName">
          <van-collapse-item title="班前检查内容" name="1">
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">消防通道是否畅通</span>
              <van-radio-group :modelValue="formState.preShift.fireExitClear + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">火灾报警系统运转是否正常</span>
              <van-radio-group :modelValue="formState.preShift.fireAlarmOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">监视系统运转是否正常</span>
              <van-radio-group :modelValue="formState.preShift.monitorOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">红外线报警系统运转是否正常</span>
              <van-radio-group :modelValue="formState.preShift.infraredAlarmOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">保险柜是否安全</span>
              <van-radio-group :modelValue="formState.preShift.safeSecure + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">照明、营业厅设备及器材是否正常</span>
              <van-radio-group :modelValue="formState.preShift.equipmentOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">电源线是否捆扎整齐，有无乱接、拉线</span>
              <van-radio-group :modelValue="formState.preShift.wiringTidy + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">营业环境是否卫生清洁</span>
              <van-radio-group :modelValue="formState.preShift.environmentClean + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">电子屏USB接口是否封堵</span>
              <van-radio-group :modelValue="formState.preShift.usbOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>

            <div style="display:flex;align-items: center;">
              <span class="groupTitle">无线、有线、蓝牙、红外是否关闭</span>
              <van-radio-group :modelValue="formState.preShift.wifiOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>

            <div style="display:flex;align-items: center;">
              <span class="groupTitle">无线投射功能是否关闭</span>
              <van-radio-group :modelValue="formState.preShift.tvOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>

            <div style="display:flex;align-items: center;">
              <span class="groupTitle">各类设备密码是否为强口令</span>
              <van-radio-group :modelValue="formState.preShift.passwordOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>

            <div style="display:flex;align-items: center;">
              <span class="groupTitle">是否链接无关网络</span>
              <van-radio-group :modelValue="formState.preShift.linkOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>

            <div style="display: flex;flex-direction: column;gap: 10px;">
              <div style="display: flex;flex-direction: column;">
                <span class="groupTitle">发现问题</span>
                <span style="color: #000;">{{ formState.preShift.issues }}</span>
              </div>
              <div style="display: flex;flex-direction: column;">
                <span class="groupTitle">处理及落实情况</span>
                <span style="color: #000;">{{ formState.preShift.solutions }}</span>
              </div>
              <div style="display: flex;flex-direction: column;" v-if="formState.preShift.anSignature">
                <span class="groupTitle">安全员签名</span>
                <img :src="api + '/' + formState.preShift.anSignature" style="width: 100%;"
                  @click="showImg(api + '/' + formState.preShift.anSignature)">

              </div>
              <div style="display: flex;flex-direction: column;" v-if="formState.preShift.baoSignature">
                <span class="groupTitle">值班保安签名</span>
                <img :src="api + '/' + formState.preShift.baoSignature" style="width: 100%;"
                  @click="showImg(api + '/' + formState.preShift.baoSignature)">

              </div>
              <div style="display: flex;flex-direction: column;" v-if="formState.preShift.pics">
                <span class="groupTitle">相关图片</span>
                <div style="display: grid;grid-template-columns: 1fr 1fr; gap: 10px; ">
                  <img style="width: 100%;height: 200px;" v-for="img in formState.preShift.pics.split(',')"
                    :src="api + '/' + img" @click="showImg(api + '/' + img)">
                </div>
              </div>
            </div>
          </van-collapse-item>
          <van-collapse-item title="班中检查内容" name="2" v-if="formState.midShift">
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">营业厅设备及器材是否正常</span>
              <van-radio-group :modelValue="formState.midShift.equipmentStatus + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">火灾报警系统运转是否正常</span>
              <van-radio-group :modelValue="formState.midShift.fireAlarmStatus + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">监视系统运转是否正常</span>
              <van-radio-group :modelValue="formState.midShift.monitorStatus + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">营业厅秩序是否良好</span>
              <van-radio-group :modelValue="formState.midShift.orderStatus + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">值班保安是否在岗</span>
              <van-radio-group :modelValue="formState.midShift.securityOnDuty + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">发布内容是否正常</span>
              <van-radio-group :modelValue="formState.midShift.contentOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>

            <div style="display: flex;flex-direction: column;gap: 10px;">
              <div style="display: flex;flex-direction: column;">
                <span class="groupTitle">发现问题</span>
                <span style="color: #000;">{{ formState.midShift.issues }}</span>
              </div>
              <div style="display: flex;flex-direction: column;">
                <span class="groupTitle">处理及落实情况</span>
                <span style="color: #000;">{{ formState.midShift.solutions }}</span>
              </div>
              <div style="display: flex;flex-direction: column;" v-if="formState.midShift.anSignature">
                <span class="groupTitle">安全员签名</span>
                <img :src="api + '/' + formState.midShift.anSignature" style="width: 100%;"
                  @click="showImg(api + '/' + formState.midShift.anSignature)">

              </div>
              <div style="display: flex;flex-direction: column;" v-if="formState.midShift.baoSignature">
                <span class="groupTitle">值班保安签名</span>
                <img :src="api + '/' + formState.midShift.baoSignature" style="width: 100%;"
                  @click="showImg(api + '/' + formState.midShift.baoSignature)">

              </div>
              <div style="display: flex;flex-direction: column;" v-if="formState.midShift.pics">
                <span class="groupTitle">相关图片</span>
                <div style="display: grid;grid-template-columns: 1fr 1fr; gap: 10px; ">
                  <img style="width: 100%;height: 200px;" v-for="img in formState.midShift.pics.split(',')"
                    :src="api + '/' + img" @click="showImg(api + '/' + img)">
                </div>
              </div>
              <!-- <div style="display: flex;flex-direction: column;">
                <span class="groupTitle">安全员签名:</span>
                <img :src=" formState.midShift.solutions" style="width: 100%;" @click="showImg(namePic)">
              </div>
              <div style="display: flex;flex-direction: column;">
                <span class="groupTitle">值班保安签名:</span>
                <img :src="namePic" style="width: 100%;" @click="showImg(namePic)">
              </div> -->
            </div>
          </van-collapse-item>
          <van-collapse-item title="班后检查内容" name="3" v-if="formState.postShift">
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">照明、电器电源是否全部关闭</span>
              <van-radio-group :modelValue="formState.postShift.powerOff + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">门窗是否全部关闭并锁好</span>
              <van-radio-group :modelValue="formState.postShift.doorsLocked + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">保险柜是否锁好，钥匙是否管好或交接好</span>
              <van-radio-group :modelValue="formState.postShift.safeLocked + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">有价卡及现金是否清点清楚入柜</span>
              <van-radio-group :modelValue="formState.postShift.cashSecured + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">监视系统运转是否正常</span>
              <van-radio-group :modelValue="formState.postShift.monitorOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;gap:10px">
              <span class="groupTitle">火灾报警系统运转是否正常</span>
              <van-radio-group :modelValue="formState.postShift.fireAlarmOk + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display:flex;align-items: center;">
              <span class="groupTitle">红外线报警系统运转是否正常并进行设防</span>
              <van-radio-group :modelValue="formState.postShift.infraredArmed + ''"
                style="margin: 10px; display: flex;gap: 10px;">
                <van-radio name="1">是</van-radio>
                <van-radio name="0">否</van-radio>
              </van-radio-group>
            </div>
            <div style="display: flex;flex-direction: column;gap: 10px;">
              <div style="display: flex;flex-direction: column;">
                <span class="groupTitle">发现问题</span>
                <span style="color: #000;">{{ formState.postShift.issues }}</span>
              </div>
              <div style="display: flex;flex-direction: column;">
                <span class="groupTitle">处理及落实情况</span>
                <span style="color: #000;">{{ formState.postShift.solutions }}</span>
              </div>
              <div style="display: flex;flex-direction: column;" v-if="formState.postShift.anSignature">
                <span class="groupTitle">安全员签名</span>
                <img :src="api + '/' + formState.postShift.anSignature" style="width: 100%;"
                  @click="showImg(api + '/' + formState.postShift.anSignature)">

              </div>
              <div style="display: flex;flex-direction: column;" v-if="formState.postShift.baoSignature">
                <span class="groupTitle">值班保安签名</span>
                <img :src="api + '/' + formState.postShift.baoSignature" style="width: 100%;"
                  @click="showImg(api + '/' + formState.postShift.baoSignature)">

              </div>
              <div style="display:flex;align-items: center;">
                <span class="groupTitle">是否厅经理本人签字</span>
                <van-radio-group :modelValue="formState.postShift.inPerson + ''"
                  style="margin: 10px; display: flex;gap: 10px;">
                  <van-radio name="1">是</van-radio>
                  <van-radio name="0">否</van-radio>
                </van-radio-group>
              </div>
              <div style="display: flex;flex-direction: column;" v-if="formState.postShift.inPerson==0">
                <span class="groupTitle" style="margin-top: 10px;">原因:</span>
                <span style="color:red;">{{ formState.postShift.notes }}</span>
              </div>
              <div style="display: flex;flex-direction: column;" v-if="formState.postShift.tingSignature">
                <span class="groupTitle">厅经理签名:</span>
                <img :src="api + '/' + formState.postShift.tingSignature" style="width: 100%;"
                  @click="showImg(api + '/' + formState.postShift.tingSignature)">

              </div>
              <div style="display: flex;flex-direction: column;" v-if="formState.postShift.pics">
                <span class="groupTitle">相关图片:</span>
                <div style="display: grid;grid-template-columns: 1fr 1fr; gap: 10px; ">
                  <img style="width: 100%;height: 200px;" v-for="img in formState.postShift.pics.split(',')"
                    :src="api + '/' + img" @click="showImg(api + '/' + img)">
                </div>


              </div>
              <!-- <div style="display: flex;flex-direction: column;">
                <span class="groupTitle">安全员签名:</span>
                <img :src="namePic" style="width: 100%;" @click="showImg(namePic)">
              </div>
              <div style="display: flex;flex-direction: column;">
                <span class="groupTitle">值班保安签名:</span>
                <img :src="namePic" style="width: 100%;" @click="showImg(namePic)">
              </div> -->
            </div>
          </van-collapse-item>
        </van-collapse>

      </template>
    </van-cell>
  </div>
</template>
<style>
.groupTitle {
  width: 70%;
  font-weight: bold;
  color: #000;
}
</style>